<template>
    <div class="coursePayment">
        <div class="courseInfo">
            <div class="courseInfoLeft">
                <!-- <img :src="courseData.type_referral" lazy-load mode="aspectFill"> -->
                <img :src="courseData.batch_image" lazy-load mode="aspectFill">
            </div>
            <div class="courseInfoRight">
                <div class="courseTitle">悦器社吉他训练营</div>
                <div class="courseArticle">
                    <div>已选:<span class="articleName">{{courseData.type_name}}</span>课程 x 1</div>
                    <div>{{grossPrice}}</div>
                </div>
            </div>
        </div>
        <div class="balanceInfo">
            <div class="balanceTitle">结算</div>
            <div class="inviteCode balanceLine">
                <div class="inviteCodeKey balanceKey">邀请码</div>
                <div class="inviteCodeValue balanceValue">
                    <input type="text" maxlength="10" @confirm="acquireReducedPrice('confirm')" v-model="inviteCode" @input="acquireReducedPrice('input')">
                </div>
            </div>
            <div class="balanceLine">
                <div class="balanceKey">商品总价：</div>
                <div class="balanceValue">¥ {{grossPrice}}</div>
            </div>
            <div class="balanceLine">
                <div class="balanceKey">优惠：</div>
                <div class="balanceValue">- ¥ {{minusPrice}}</div>
            </div>
            <div class="balanceLine">
                <div class="balanceKey">需支付：</div>
                <div class="balanceValue">¥ {{actualPrice}}</div>
            </div>
        </div>
        <div class="disburseInfo">
            <div class="disburseTitle">支付方式</div>
            <div class="disbursecontent" @click.stop.prevent="selectPaymentMode">
                <div class="disburseIcon">
                    <img src="http://mobuz-mp.gz.bcebos.com/matter%2Fwechat_pay%402x.png" lazy-load>
                </div>
                <div class="disburseBtn">
                    <div class="checkedBtn" v-if="paymentMode">
                        <div class="insideTrack"></div>
                    </div>
                    <!-- <div class="uncheckBtn" v-if="!paymentMode"></div> -->
                </div> 
            </div>
        </div>
        <div class="disburseModule">
            <div class="disburseFigure">实付：¥ {{actualPrice}}</div>
            <div class="disburseButton" @click.stop.prevent="immediatePayment">立即付款</div>
        </div>
    </div>
</template>

<script>
import {obtainCoursePayParam, obtainPromotionCode, obtainInviteCode, amendInviteCode, amendPromotionCode, obtainWXPayParam, amendCourseIndent, cancelCourseIndent, preserveUserinfo} from '@/config/api'
import { obtainCurrentPage } from '@/config/mUtils'
import { showMessager, wechatPayment} from '@/config/wUtils'
export default {
  data () {
    return {
        // 用户信息
        userInfo: [],
        // openId
        openId: '',
        // unionId
        unionId: '',
        // nickName
        nickName: '',




        // 课程数据
        courseData: [],
        // 是否选择支付方式
        paymentMode: true,
        // 商品总价
        grossPrice: '',
        // 优惠价格
        minusPrice: (0).toFixed(2),
        // 实际价格
        actualPrice: '',
        // 邀请码
        inviteCode: '',
        // 优惠券数据
        couponData: [],   
        // 优惠券 id
        couponId: '',  
        // 付款类型   1立即购买 2 邀请码  3 优惠券
        payType: '1',
        //   // 订单id
        //   orderId: '',
        // 按钮锁 防止重复提交
        submitClock: false
    }
  },
  // // wxml 不支持过滤
  // filters: {
  //   formatToFixed (figure, digit) {
  //       let rate = ((figure-0)/100).toFixed(digit)
  //       console.log(rate, figure, digit, '....rate')
  //       return rate + ''
  //    }
  // },
  watch: {
    inviteCode: {
      handler (val) {
        console.log(val, '..........val.........')
        if (val.length !== 10) {
            console.log(val.length,  this.payType, '.....this.payType')
            
            if (val.length === 0) {
                // 获取 优惠券数据
                this.acquireCourseCoupon()
            } else {
                // 优惠价格
                this.minusPrice = (0).toFixed(2)
                // 实际价格
                this.actualPrice = this.grossPrice

                // 付款类型   1立即购买 2 邀请码 3 优惠券
                this.payType = '1'
                // 优惠券 id
                this.couponId = '' 
            }
            
        }
      },
      deep: true
    }
  },
  mounted () {
    // let self = this
    // // 初始化 课程支付界面
    // self.initCoursePayment()
  },
  methods: {
    // 初始化 课程支付界面
    initCoursePayment () {
      let self = this
      // 邀请码
      self.inviteCode = ''
      // 本地用户信息
      self.userInfo = wx.getStorageSync('userInfo')
      if (JSON.stringify(self.userInfo) != '[]' && self.$root.$mp.query.batch_id && self.$root.$mp.query.type_id) {
        console.log(self.userInfo, '...用户信息...............')
        // openId
        self.openId = self.userInfo.openId
        // unionId
        self.unionId = self.userInfo.unionId
        // nickName
        self.nickName = self.userInfo.nickName
        // // 获取 优惠券数据
        // self.acquireCourseCoupon()
        // 获取 课程支付 数据
        self.acquireCoursePaymentData()
      }

      if (self.$root.$mp.query.terrace_state === '2' && self.$root.$mp.query.operation_state === '1') {
          console.log('self.$root.$mp.query...........', self.$root.$mp.query)
            // openId
            self.openId = self.$root.$mp.query.openId
            // unionId
            self.unionId = self.$root.$mp.query.union_id
            // nickName
            self.nickName = self.$root.$mp.query.nickName
            // 邀请码
            self.inviteCode = self.$root.$mp.query.inviteCode || ''
            // 获取 课程支付 数据
            self.acquireCoursePaymentData()
      }
    },
    // 选择 支付方式
    selectPaymentMode () {
      let self = this
    //   // 是否选择支付方式
    //   self.paymentMode = !self.paymentMode
    },
    // 立即支付
    async immediatePayment () {
      let self = this
      console.log(self.payType, self.couponId, '........self.payType')
      // 判断是否选择支付方式
      if (!self.paymentMode) {
        showMessager('请选择支付方式')
      } else {
        console.log('立即支付', self.openId, self.actualPrice * 100)
        if (!self.courseData) {
            return;
        }
        console.log(self.submitClock, '按钮锁 防止重复提交')
        // 按钮锁 防止重复提交
        if(self.submitClock) {
            showMessager('请勿重复提交')
           return;
        }


        // 上锁
        self.submitClock = true
        let wxPayParam = await obtainWXPayParam(self.openId, self.unionId, self.courseData.type_name + '课程', self.actualPrice * 100, (self.grossPrice * 100), self.nickName, self.couponId, self.inviteCode, self.payType, self.courseData.type_id, self.$root.$mp.query.batch_id)
        // await createCourseIndent((self.actualPrice*100), (self.grossPrice*100), self.nickName, self.inviteCode, self.payType)
        console.log(wxPayParam, '....wxPayParam')
        if (wxPayParam.status === 200) {
            // 微信支付
            const paymentStatus = await wechatPayment(wxPayParam.data)
            console.log(paymentStatus, '...paymentStatus')
            if (paymentStatus) {
                // 确定 课程订单
                self.confirmCourseIndent(wxPayParam.data.out_trade_no)
            
                // 付款类型   1立即购买 2 邀请码  3 优惠券
                if (self.payType === '2') {
                    // 修改 邀请码 数据 0 -- 未使用   1 -- 已使用
                    amendInviteCode(self.inviteCode, 1)
                }
                if (self.payType === '3') {
                    // 修改 优惠券 数据 0 -- 未使用   1 -- 已使用
                    amendPromotionCode(self.couponId, 1)
                }

            } else {
                // // 修改 邀请码 数据  0 -- 未使用   1 -- 已使用
                // amendInviteCode(self.inviteCode, 0)
                // 付款类型   1立即购买 2 邀请码  3 优惠券
                if (self.payType === '2') {
                    // 修改 邀请码 数据 0 -- 未使用   1 -- 已使用
                    amendInviteCode(self.inviteCode, 0)
                }
                if (self.payType === '3') {
                    // 修改 优惠券 数据 0 -- 未使用   1 -- 已使用
                    amendPromotionCode(self.couponId, 0)
                }
                // 修改 课程订单 数据  付款状态  1 未付款 2 成功 3失败（开除）
                cancelCourseIndent(wxPayParam.data.out_trade_no)
            }
        }
        // 若 实际支付金额 为 0
        if (wxPayParam.status === 201) {
            // 确定 课程订单
            self.confirmCourseIndent(wxPayParam.data.out_trade_no)
            // // 修改 邀请码 数据 0 -- 未使用   1 -- 已使用
            // amendInviteCode(self.inviteCode, 1)

            // 付款类型   1立即购买 2 邀请码  3 优惠券
            if (self.payType === '2') {
                // 修改 邀请码 数据 0 -- 未使用   1 -- 已使用
                amendInviteCode(self.inviteCode, 1)
            }
            if (self.payType === '3') {
                // 修改 优惠券 数据 0 -- 未使用   1 -- 已使用
                amendPromotionCode(self.couponId, 1)
            }
        }
        // 若 重复提交
        if (wxPayParam.status === 403) {
            showMessager(wxPayParam.msg)
        }
        // 批次不存在
        if (wxPayParam.status === 404) {
            showMessager(wxPayParam.msg)
        }
        // 优惠券
        if (wxPayParam.status === 405) {
            showMessager(wxPayParam.msg+ '将重新加载优惠券')

            // 获取 优惠券数据
            self.acquireCourseCoupon()
        }
        setTimeout(function(){
			// 解锁
            self.submitClock = false
		},1000)
      }
    },
    // 获取 优惠券数据
    async acquireCourseCoupon () {
        let self = this;
        let couponInfo  = await obtainPromotionCode(self.openId, self.unionId)
        console.log(couponInfo, '......couponInfo')
        if (couponInfo.status === 200) {
            // 邀请码
            self.inviteCode = ''
            // 优惠券数据
            self.couponData = couponInfo.data
            // 优惠券 id
            self.couponId = couponInfo.data.g_id
            // 优惠价格
            self.minusPrice = ((couponInfo.data.money - 0) / 100).toFixed(2)
            if ((self.courseData.type_price - 0) > (couponInfo.data.money - 0)) {
              // 实际价格
              self.actualPrice = (((self.courseData.type_price - 0) - (couponInfo.data.money  - 0)) / 100).toFixed(2)
            } else {
              // 实际价格
              self.actualPrice = (0).toFixed(2)
            }
            // 付款类型   1立即购买 2 邀请码  3 优惠券
            self.payType = '3'
        } else {
            // 优惠价格
            self.minusPrice = (0).toFixed(2)
            // 优惠券 id
            self.couponId = '' 
            // 付款类型   1立即购买 2 邀请码  3 优惠券
            self.payType = '1'
        }
    },
    // 获取 课程支付 数据
    async acquireCoursePaymentData () {
      let self = this
      wx.showNavigationBarLoading()
        // console.log(self.$root.$mp.query, '......this.$root.$mp.query')
      let courseInfo = await obtainCoursePayParam(self.$root.$mp.query.type_id, self.$root.$mp.query.batch_id)
      if (courseInfo.status === 200) {
        // 课程数据
        self.courseData = courseInfo.data
        // 商品总价
        self.grossPrice = ((self.courseData.type_price - 0) / 100).toFixed(2)
        // 实际价格
        self.actualPrice = self.grossPrice
        console.log(courseInfo.data, '...courseInfo.data')
        if (self.$root.$mp.query.terrace_state === '2' && self.$root.$mp.query.operation_state === '1') {
            if (self.inviteCode) {
                // 获取 优惠价格
                self.acquireReducedPrice('confirm')
            }
        } else {
            // 获取 优惠券数据
            self.acquireCourseCoupon()
        }
      }
      console.log(courseInfo, '....课程支付')
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    },
    // 获取 优惠价格
    async acquireReducedPrice (type) {
      let self = this
      if (self.inviteCode.length !== 10) {
        if (type === 'confirm') {
            showMessager('请输入正确的邀请码')
        }
        if (type === 'confirm') {
            return
        }
      } else {
        const inviteData = await obtainInviteCode(self.inviteCode)
        if (inviteData) {
          console.log(inviteData, '....inviteData................')
          if (inviteData.status === 200) {
            // 优惠价格
            self.minusPrice = ((inviteData.data.price - 0) / 100).toFixed(2)
            console.log(self.minusPrice, '....minusPrice................')
            if ((self.courseData.type_price - 0) > (inviteData.data.price - 0)) {
              // 实际价格
              self.actualPrice = (((self.courseData.type_price - 0) - (inviteData.data.price - 0)) / 100).toFixed(2)
            } else {
              // 实际价格
              self.actualPrice = (0).toFixed(2)
            }
            // 优惠券 id
            self.couponId = ''
            // 付款类型   1立即购买 2 邀请码  3 优惠券
            self.payType = '2'
            console.log(self.actualPrice, '....actualPrice................')
          } else {
            showMessager(inviteData.msg)

            // 获取 优惠券数据
            self.acquireCourseCoupon()

            // // 付款类型   1立即购买 2 邀请码  3 优惠券
            // self.payType = '1'


          }
        }
      }
    },
    // 确定 课程订单
    async confirmCourseIndent (orderId) {
      let self = this
      const confirmFlag = await amendCourseIndent(orderId, (self.actualPrice * 100), (self.grossPrice * 100), self.nickName, self.inviteCode, self.payType, self.openId, self.unionId, self.courseData.type_id, self.$root.$mp.query.batch_id)
      console.log(confirmFlag, '........')
      if (confirmFlag.status === 200) {
        // 保存用户信息
        const personalState = await preserveUserinfo(self.openId, self.$root.$mp.query.batch_id, confirmFlag.student_id, self.unionId)
        console.log(personalState, '.......保存用户信息')
        if (personalState.status === 200) {
            if (self.$root.$mp.query.terrace_state === '2' && self.$root.$mp.query.operation_state === '1') {
                console.log('.....创建订单成功121231321.......')
                wx.redirectTo({ url: '../returnApp/main?amount='+(self.grossPrice * 100)})
                return;
            }
            wx.setStorageSync('student_id', confirmFlag.student_id)
            wx.setStorageSync('batch_id', self.$root.$mp.query.batch_id)  
            showMessager('创建订单成功')
            console.log('创建订单成功', self.$root.$mp.query.batch_id)
            wx.switchTab({
                url: '../dengesCourse/main'
            })
        }  
        // wx.switchTab({
        //   url: '../dengesCourse/main?batch_id='+self.$root.$mp.query.batch_id
        // })
      } else if(confirmFlag.status === 400) {
        showMessager('创建订单失败')
      } else {
          showMessager('创建订单失败,请联系客服')
      }
    }
  },
  // 下拉刷新
  onPullDownRefresh () {
    let self = this
    // 按钮锁 防止重复提交
    self.submitClock = false
    // 初始化 课程支付界面
    self.initCoursePayment()
  },
  // 页面显示
  onShow () {
    let self = this
    // 初始化 课程支付界面
    self.initCoursePayment()
  }
}
</script>


<style lang="less" scoped>
.coursePayment{
    width: 100%;
    height: 100%;
    background: #ffffff;
    .courseInfo{
        margin-left: 32rpx;
        padding: 22.5rpx 32rpx 23.5rpx 0;
        border-bottom: 1rpx solid #EAEAEA;
        .courseInfoLeft{
            display: inline-block;
            vertical-align: top;
            width: 240rpx;
            height: 180rpx;
            border-radius: 5rpx;
            overflow: hidden;
            background: #333333;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .courseInfoRight{
            display: inline-block;
            vertical-align: top;
            margin-top: 13rpx;
            margin-left: 30rpx;
            // width: 420rpx;
            .courseTitle{
                font-family: PingFangSC-Medium;
                font-size: 30rpx;
                color: #666666;
                width: 300rpx;
                height: 42rpx;
                line-height: 42rpx;
                margin-bottom: 74rpx;
            }
            .courseArticle{
                div{
                    display: inline-block;
                    vertical-align: middle;
                    height: 30rpx;
                    line-height: 30rpx;
                    &:nth-child(1){
                        font-family: PingFangSC-Regular;
                        font-size: 22rpx;
                        color: #666666;
                        margin-right: 89rpx;
                        .articleName{
                            max-width: 90rpx;
                            white-space: nowrap;
                            overflow: hidden;
                            /* 文本超出变省略号 */
                            text-overflow: ellipsis;
                            -o-text-overflow: ellipsis;
                            display: inline-block;
                            vertical-align: top;
                        }
                    }
                    &:nth-child(2){
                        font-family: PingFangSC-Regular;
                        font-size: 22rpx;
                        color: #EE3A29;
                        width: 100rpx;
                        white-space: nowrap;
                        overflow: hidden;
                        /* 文本超出变省略号 */
                        text-overflow: ellipsis;
                        -o-text-overflow: ellipsis;
                        text-align: right;
                    }
                }
            }
        }
    }

    .balanceInfo{
        margin-left: 32rpx;
        padding: 17.5rpx 32rpx 5.5rpx 0;
        border-bottom: 1rpx solid #EAEAEA;
        .balanceTitle{
            font-family: PingFangSC-Regular;
            font-size: 32rpx;
            color: #666666;
            width: 66rpx;
            height: 45rpx;
            line-height: 45rpx;
        }
        .balanceLine{
            font-size: 0;
            margin-bottom: 18rpx;
            height: 37rpx;
            line-height: 37rpx;
            .balanceKey{
                display: inline-block;
                vertical-align: middle;
                font-family: PingFangSC-Regular;
                font-size: 28rpx;
                color: #666666;
                width: 30%;
                text-align: left;
                
            }
            .balanceValue{
                display: inline-block;
                vertical-align: middle;
                width: 70%;
                text-align: right;
                font-family: PingFangSC-Regular;
                font-size: 26rpx;
                color: #333333;
            }
        }
        .inviteCode{
            margin-top: 20rpx;
            margin-bottom: 34rpx;
            height: 58rpx;
            line-height: 58rpx;
            .inviteCodeValue{
                input{
                    width: 236rpx;
                    height: 58rpx;
                    background: #FFFFFF;
                    border: 1rpx solid #B5B5B5;
                    border-radius: 6rpx;
                    padding: 9rpx 30rpx;
                    font-size: 28rpx;
                    color: #333333;
                    margin-left: 240rpx;
                    box-sizing: border-box;
                    caret-color: #333333;
                }
            }
        }
        
    }

    .disburseInfo{
        margin-left: 32rpx;
        padding: 17rpx 50rpx 0rpx 0;
        .disburseTitle{
            font-family: PingFangSC-Regular;
            font-size: 32rpx;
            color: #666666;
            width: 131rpx;
            height: 45rpx;
            line-height: 45rpx;
        }
        .disbursecontent{
            margin-top: 22rpx;
            height: 36rpx;
            line-height: 36rpx;
            .disburseIcon{
                width: 117rpx;
                height: 26rpx;
                padding-top: 5rpx;
                padding-bottom: 5rpx;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .disburseBtn{
                float: right;
                clear: both;
                margin-top: -26rpx;
                .checkedBtn{
                    width: 24rpx;
                    height: 24rpx;
                    line-height: 1;
                    background: #00C800;
                    border-radius: 50%;
                    overflow: hidden;
                    box-sizing: border-box;

                    display: flex;
                    align-items: center;
                    .insideTrack{
                        width: 12rpx;
                        height: 12rpx;
                        line-height: 1;
                        margin: 0 auto;
                        // margin-top: 6rpx;
                        background: #FFFFFF;
                        border-radius: 50%;
                        overflow: hidden;
                        box-sizing: border-box;
                    }
                }
                .uncheckBtn{
                    width: 24rpx;
                    height: 24rpx;
                    background: #FFFFFF;
                    border: 1rpx solid #999999;
                    border-radius: 50%;
                    overflow: hidden;
                    box-sizing: border-box;
                }
            }
        }
    }

    .disburseModule{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 98rpx;
        line-height: 98rpx;
        box-shadow: 0 -1rpx 10rpx 0 #EEEEEE;
        font-size: 0;
        div{
            display: inline-block;
            vertical-align: middle;
            font-size: 0;
        }
        .disburseFigure{
            background: #FFFFFF;
            width: 470rpx;
            text-align: right;
            padding-right: 29rpx;
            font-family: PingFangSC-Regular;
            font-size: 30rpx;
            color: #666666;
            box-sizing: border-box;
        }
        .disburseButton{
            background-image: linear-gradient(90deg, #FFB497 0%, #FE7A72 100%);
            font-family: PingFangSC-Regular;
            font-size: 36rpx;
            color: #FFFFFF;
            text-align: center;
            width: 280rpx;
        }
    }
}
</style>
